import React, { Component } from 'react';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Card, Button, Row, Col, Input } from 'antd';
import { connect } from 'dva';
import router from 'umi/router';
import moment from 'moment';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import FooterToolbar from '@/components/FooterToolbar';
import DescriptionList from '@/components/DescriptionList';
import styles from './style.less';
import ClaimInfor from './ClaimInfor';
import foreign from '@/assets/foreign.png';
import bill from '@/assets/bill.png';

const FormItem = Form.Item;
const { Description } = DescriptionList;
const { TextArea } = Input;

@connect(({ remitclaim }) => ({
  remitclaim,
}))
@Form.create()
class RemitClaimDetail extends Component {
  constructor(props) {
    super(props);
    this.state = { selectedRows: [], selectedRowKeys: [] };
  }

  componentDidMount() {
    const { dispatch, location } = this.props;
    const { clmRcrdId } = location.query;
    this.setState({ clmRcrdId });
    dispatch({
      type: 'remitclaim/fetchClaimDetail',
      payload: { clmRcrdId },
    });
  }

  save = () => {
    const { form, dispatch } = this.props;
    const { clmRcrdId } = this.state;
    form.validateFields({ force: true }, (err, values) => {
      if (!err) {
        dispatch({
          type: 'remitclaim/fetchClaimCancel',
          payload: { clmRcrdId, ...values },
        });
      }
    });
  };

  render() {
    const {
      remitclaim: {
        payApplySubmitData: { firstStep },
        claimDetail,
      },
      form: { getFieldDecorator },
      location,
    } = this.props;
    const { pathname } = location;
    const tempUrl = pathname.split('/')[3];
    const { selectedRows, selectedRowKeys } = this.state;
    const formItemLayout = {
      labelCol: {
        xl: {
          span: 2,
        },
      },
      wrapperCol: {
        xl: {
          span: 18,
        },
      },
    };
    // 动态表格判断
    const renderDom = (text, item) => {
      if (item.type === 'mouth') {
        return text ? moment(text).format('YYYY-MM') : '--';
      }
      if (item.type === 'date') {
        return text ? moment(text).format('YYYY-MM-DD') : '--';
      }
      return text || '--';
    };
    const columnsInitial = firstStep.columns ? firstStep.columns : [];
    const renderColumn =
      columnsInitial['columns'.concat(claimDetail.clmType).concat(claimDetail.feeType)];
    const rowKey = columnsInitial['rowkey'.concat(claimDetail.clmType).concat(claimDetail.feeType)];
    const columns = renderColumn
      ? renderColumn.map((item, index) => ({
          title: item.label,
          dataIndex: item.prop,
          key: item.prop || index,
          className: item.dataIndex === 'operation' ? styles.hide : styles.show,
          onCell: () => ({ style: { textAlign: item.location ? item.location : null } }),
          onHeaderCell: () => ({
            style: { fontWeight: 'bold', textAlign: item.location ? item.location : null },
          }),
          render: text => renderDom(text, item),
        }))
      : [];
    return (
      <PageHeaderWrapper>
        <Card title="认领信息">
          <DescriptionList>
            <Description term="认领类型">{claimDetail.clmTypeName || '--'}</Description>
            <Description term="认领人员">{claimDetail.creName || '--'}</Description>
            <Description term="认领时间">
              {claimDetail.creTime ? moment(claimDetail.creTime).format('YYYY-MM-DD HH:mm') : '--'}
            </Description>
            <Description term="结算状态">{claimDetail.settStateName || '--'}</Description>
          </DescriptionList>
        </Card>
        <ClaimInfor
          {...{
            foreign,
            bill,
            columns,
            selectedRows,
            selectedRowKeys,
            rowKey,
            processInfor: claimDetail,
            title: firstStep.detailTitle,
            clmAmo: true,
            detailFlag: true,
          }}
        />
        {!!claimDetail.diffRcrdList.length && (
          <Card title="差额处理">
            {claimDetail.diffRcrdList.map(item => (
              <p key={item.diffType}>
                <span>{item.diffTypeName} &nbsp;&nbsp;&nbsp;&nbsp;</span>
                <span>
                  {item.hdlInfo}，汇款单余额（元）：{item.hdlAmo}
                </span>
              </p>
            ))}
          </Card>
        )}
        {/* 取消认领 */}
        {tempUrl === 'claimCancel' && (
          <Card title="取消认领">
            <Form>
              <Row>
                <Col span={16}>
                  <FormItem label="取消原因" {...formItemLayout}>
                    {getFieldDecorator('canclRsn', {
                      rules: [
                        {
                          required: true,
                          message: '请输入取消原因',
                        },
                      ],
                    })(<TextArea placeholder="请输入" rows={4} style={{ width: '100%' }} />)}
                  </FormItem>
                </Col>
              </Row>
            </Form>
          </Card>
        )}
        <FooterToolbar style={{ width: '100%' }}>
          <Button
            onClick={() => {
              router.goBack();
            }}
          >
            返回
          </Button>
          {tempUrl === 'claimCancel' && (
            <Button style={{ marginLeft: 16 }} type="primary" onClick={() => this.save()}>
              提交
            </Button>
          )}
        </FooterToolbar>
      </PageHeaderWrapper>
    );
  }
}

export default RemitClaimDetail;
